<template>
  <view class="content">
    <u-navbar class="nav">
      <view class="u-nav-slot" slot="left">
        <u-icon name="list" size="25"></u-icon>
      </view>
      <view :author="current.author" class="u-nav-slot-center" slot="center">
        <u-search placeholder="请输入" @search="onSearch(search)" v-model="search">
        </u-search>
      </view>
      <view class="u-nav-slot-right" slot="right">
        <u-icon name="mic" size="25"></u-icon>
      </view>
    </u-navbar>
    <view>
      <view class="u-demo-block__content">
        <u-row customStyle="margin-bottom: 10px">
          <u-col span="9">
            <view class="demo-layout bg-purple">
              <u-icon class="all" name="play-circle" size="30" color="#20d39b"></u-icon>
              <u--text class="aaa" text="全部播放(1540)" margin="10px"></u--text>
            </view>
          </u-col>
          <u-col span="1">
            <view class="demo-layout bg-purple-light">
              <u-icon name="list" size="25"></u-icon>
            </view>
          </u-col>
          <u-col span="1">
            <view class="demo-layout bg-purple-dark">
              <u-icon name="download" size="25"></u-icon>
            </view>
          </u-col>
          <u-col span="1">
            <view class="demo-layout bg-purple-dark">
              <u-icon name="list-dot" size="25"></u-icon>
            </view>
          </u-col>
        </u-row>
        <view class="mc-list" v-for="(item, index) in audioList" :key="item.id" @click="play(item.id,item.name,item)">
          <u-cell-group>
            <u-cell :title="item.name" :label="item.writer || item.artists[0].name" iconStyle="play-right-fill">
              <u-icon slot="right-icon" size="25" name="rewind-right-fill"></u-icon>
              <u-icon slot="right-icon" size="25" name="skip-forward-right"></u-icon>
              <u-icon slot="right-icon" size="25" name="list-dot"></u-icon>
            </u-cell>
          </u-cell-group>
        </view>
        <u-empty v-if="listEmpty" mode="list" icon="http://cdn.uviewui.com/uview/empty/car.png">
        </u-empty>
      </view>
    </view>
    <view class="ad-width">
      <audio style="text-align: left" :src="audioUrl" :poster="current.poster " :name="audioName"
        :author="current.author" :action="audioAction" controls></audio>
    </view>
    <u-loading-page :loading="flag"></u-loading-page>
  </view>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
        value6: 0,
        search: '',
        audioUrl: '',
        flag: false,
        audioName: '周杰伦',
        controlsFlag: true,
        audioList: [{
          name: '第七颗星星',
          writer: '李响',
          id: 347230
        }, {
          name: '第七颗星星',
          writer: '李响',
          id: 1
        }, {
          name: '第七颗星星',
          writer: '李响',
          id: 2
        }],
        current: {
          poster: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7fbf26a0-4f4a-11eb-b680-7980c8a877b8.png',
          name: '致爱丽丝',
          author: '暂无',
          src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',
        },
        audioAction: {
          method: 'pause'
        },
        chartData: {
          categories: [],
          series: [],
        },
        listEmpty: false,
        newImg: '',
      }
    },
    onLoad() {
      uni.setNavigationBarTitle({
        title: '首页播放'
      });
    },
    methods: {
      //获取歌曲的数据
      onSearch(val) {
        console.log(val)
        if( !val ) {
          console.log('输入的搜索歌曲不能为空')
        }else {
            this.flag = true
            this.$api(`/search?keywords=${val}`, 'GET').then(res => {
              if (Object.keys(res.result).length === 0) { //判断是否为空对象
                this.listEmpty = true
                this.flag = false
                this.audioList = []
                // 默认歌曲
                this.audioName = "盗将行"
                this.audioUrl =
                  "http://m8.music.126.net/20220717132322/59cbb7fbe291365cd95a9a6bc50aa7d5/ymusic/4b8e/fd23/beb9/65b5494a1a36154f6af4e20f7fc3e9bf.mp3"
              } else {
                this.audioList = res.result.songs
                //分页 
                /** 
                 * 10个一页
                 * 滚动翻页
                 * 拆分数组
                 * **/
                this.flag = false
              }
            }).catch(err => {
              console.log(err)
            })
        }

      },
      //获取播放音乐的url链接
      play(id, name, item) {
        console.log(id)
        console.log(id, name)
        console.log(item)
        this.$api(`/song/url?id=${id}`, 'GET').then(res => {
          // console.log(res.data[0].url)
          if (res.data[0].url === null) {
            this.audioName = "盗将行"
            this.audioUrl =
              "http://m8.music.126.net/20220717132322/59cbb7fbe291365cd95a9a6bc50aa7d5/ymusic/4b8e/fd23/beb9/65b5494a1a36154f6af4e20f7fc3e9bf.mp3"
          } else {
            this.audioUrl = res.data[0].url
            this.audioName = name
            console.log(item.artists[0].img1v1Url )
            this.current.author = item.artists[0].name
            this.current.poster = item.artists[0].img1v1Url //更换默认图片
            //自动播放歌曲
            
          }
        }).catch(err => {
          console.log(err)
        })
      },
    }
  }
</script>

<style lang="less" scoped>
  /* 请根据需求修改图表容器尺寸，如果父容器没有高度图表则 */
  .charts-box {
    width: 100%;
    height: 300px;
  }

  .nav {
    position: fixed;
    left: 0;
    right: 0;
    top: 88rpx;
    z-index: 9999;
    margin-top: 99px;
  }

  .wrap {
    padding: 12px;
  }

  .demo-layout {
    display: inline-flex;
    height: 40px;
  }

  .bg-purple {

    background: #e5e9f2;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .bg-purple-dark {
    background: #e5e9f2;
  }


  .ad-width {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .uni-audio-default {
    max-width: 200px;
    border: 1px solid #8f8f94;
    border-radius: 50px;

  }

  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .logo {
      height: 200rpx;
      width: 200rpx;
      margin-top: 200rpx;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 50rpx;
    }
  }

  /**休假审批 样式*/
  .item {
    display: flex;
    align-items: center;
    background-color: white;
    padding: 10rpx;

    .photo {
      margin-left: 10rpx;
    }

    .box {
      margin-left: 10rpx;
      font-size: 16rpx;
    }

    .red-dot {
      width: 20rpx;
      height: 20rpx;
      background-color: red;
      border-radius: 50%;
    }
  }
</style>
